<% unless internal_navigation? || user_signed_in? %>
  <script type="application/ld+json">
    <%= @organization_json_ld.to_json.html_safe %>
  </script>
<% end %>
<style>
  :root {
    --profile-brand-color: <%= Color::CompareHex.new([user_colors(@user)[:bg], user_colors(@user)[:text]]).brightness(0.88) %>;
  }
</style>
<div class="brand-bg">
  <div class="crayons-layout crayons-layout--limited-l pt-7 m:pt-9">
    <header class="profile-header crayons-card mt-2">
      <div class="relative profile-header__top">
        <span class="crayons-logo crayons-logo--3xl">
          <img src="<%= @user.profile_image_url_for(length: 320) %>" alt="<%= @user.name %> logo" width="128" height="128" title="<%= t("views.organizations.logo", org: @user.name) %>" class="crayons-logo__image">
        </span>

        <div class="profile-header__actions">
          <button
            id="user-follow-butt"
            class="crayons-btn whitespace-nowrap follow-action-button"
            data-info='<%= DataInfo.to_json(object: @user) %>'>
            <%= t("views.organizations.follow") %>
          </button>
          <div class="profile-dropdown ml-2 s:relative" data-organizationname="<%= @organization.name %>">
              <button id="organization-profile-dropdown" aria-expanded="false" aria-controls="organization-profile-dropdownmenu" aria-haspopup="true" class="crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon">
                <%= crayons_icon_tag("overflow-horizontal", class: "dropdown-icon", title: t("views.organizations.dropdown")) %>
              </button>

              <div id="organization-profile-dropdownmenu" class="crayons-dropdown left-2 right-2 s:right-0 s:left-auto top-100 mt-1">
                <span class="report-abuse-link-wrapper" data-path="/report-abuse?url=<%= organization_url(@organization) %>"></span>
              </div>
            </div>
        </div>
      </div>

      <div class="profile-header__details">
        <h1 class="crayons-title fw-heavy mb-2"><%= sanitize @user.name %></h1>
        <% if @user.tag_line.present? %>
          <p class="fs-l m:fs-xl color-base-70 mb-4 mx-auto max-w-100 m:max-w-75"><%= sanitize @user.tag_line %></p>
        <% end %>
        <p class="fs-base m:fs-l color-base-90 mb-4 mx-auto max-w-100 m:max-w-75"><%= sanitize(@user.summary.presence || t("views.organizations.empty")) %></p>

        <div class="profile-header__meta">
          <% if @organization.location.present? %>
            <span class="profile-header__meta__item">
              <%= crayons_icon_tag(:location, class: "mr-2 shrink-0", title: t("views.organizations.location.icon")) %>
              <span>
                <%= sanitize @organization.location %>
              </span>
            </span>
          <% end %>

          <span class="profile-header__meta__item">
            <%= crayons_icon_tag(:cake, class: "mr-2 shrink-0", title: t("views.organizations.joined.icon")) %>
            <span>
              <%= t("views.organizations.joined.text_html", date: local_date(@user.created_at)) %>
            </span>
          </span>

          <span class="profile-header__meta__item -ml-1">
            <% if @user.twitter_username.present? %>
              <a href="https://twitter.com/<%= @user.twitter_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
                <%= crayons_icon_tag(:twitter, title: t("views.organizations.twitter.icon")) %>
              </a>
            <% end %>
            <% if @user.github_username.present? %>
              <a href="https://github.com/<%= @user.github_username %>" target="_blank" rel="noopener me" class="px-1 align-middle inline-block">
                <%= crayons_icon_tag(:github, title: t("views.organizations.github.icon")) %>
              </a>
            <% end %>
            <% if @user&.profile&.website_url.present? %>
              <a href="<%= @user&.profile&.website_url %>" target="_blank" rel="noopener nofollow me" class="px-1 align-middle inline-block">
                <%= crayons_icon_tag("external-link", title: t("views.organizations.external.icon")) %>
              </a>
            <% end %>
          </span>
        </div>
      </div>

      <%= render "organizations/metadata" %>

    </header>
  </div>
</div>

<%= javascript_include_tag "organizationDropdown",
                           defer: true %>